<template>
    <u-count-down
            :time="grabBeginTime"
            format="HH:mm:ss"
            :autoStart="grabBeginTime > 0"
            @change="countChange"
    >
        <view class="btn-buy">
            <view class="btn-buy-label">等待开售</view>
            <view class="btn-buy-time">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</view>
            <view class="btn-buy-time">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</view>
            <view class="btn-buy-time">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</view>
        </view>
    </u-count-down>
</template>

<script>
    export default {
        name: "index",
        props: {
            grabBeginTime: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                timeData: {

                }
            }
        },
        methods: {
            countChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .btn-buy {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #454545;
        border-radius: 36rpx;
        padding: 0 48rpx;
        height: 70rpx;
        .btn-buy-label {
            font-size: 28rpx;
            font-weight: 400;
            color: #FFFFFF;
            margin-right: 6rpx;
            line-height: 70rpx;
        }
        .btn-buy-time {
            font-size: 28rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 70rpx;
        }
    }
</style>
